<template>
	<view>
		<!-- <view> -->
			<!-- 占位 -->
			<!-- <view class="place"></view> -->
		<!-- </view> -->
		<!-- 滑动 -->
		<view class="seckill_time_slider">
			<scroll-view scroll-x="true">
				<view class="seckill_nav">
					<view class="seckill_item" v-for="(item, index) in secTimeData" :key="index"
						@tap="changeNav(index)">
						<view class="seckill_item_text" :class="{activeText: index==currentNav}">
							{{item.time}}
						</view>
						<view class="seckill_item_info" :class="{activeInfo: index==currentNav}">
							{{item.info}}
						</view>
					</view>

				</view>
			</scroll-view>
		</view>

		<!-- 商品列表 -->
		<view class="splb" style="margin-top:0rpx; background-color: #fff; width: 660rpx;"
			v-for="item in seckillData" :key="item.id"
		>
			<view style="width:220rpx;height:100% ;">
				<image style="width:100%;height:100%" :src="item.photo" mode="aspectFill"></image>
			</view>
			<view style="width:280rpx;height: 100%; margin-left:20rpx;">
				<view class="komeito">
					{{item.name}}
				</view>
				<view class="326">
					<text style="font-size:18rpx;color: #9e9e9e;">磨砂合金|</text>
					<text style="font-size:18rpx;color: #9e9e9e;">磨砂合金|</text>
					<text style="font-size:18rpx;color: #9e9e9e;">育婴可用</text>
				</view>
				<view style="display: flex;margin-top:20rpx">
					<view class="aac">
						精选
					</view>
					<view class="aab">
						热销Top1
					</view>
				</view>
				<view style="margin-top:20rpx">
					<text style="color:red;font-size:20rpx">￥</text><text
						style="color:red;font-size: 40rpx;">{{item.newPrice}}</text><text style="color:red;font-size:20rpx">.00</text>
				</view>
			</view>
			<navigator class="buylink" :url="'../xqfq/xqfq?id='+item.id"> 
				<view class="buyDiv">
					去抢购
				</view>
			</navigator>
		</view>
		
		<!-- <view class="goods-list" style="margin-top:140rpx">
			<view class="product-list">
				<view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods)">
					<navigator url="/pages/xqfq/xqfq"><image mode="widthFix" :src="goods.img"></image></navigator>
					<view class="name">{{goods.name}}</view>
					<view class="info">
						<view class="price">{{goods.price}}</view>
						<view class="slogan">{{goods.slogan}}</view>
					</view>
				</view>
				
			</view>
			<view class="loading-text">{{loadingText}}</view>
		</view> -->

	</view>
</template>

<script>
	import data from '../../components/common/data.js'; //筛选菜单数据
	import { createNamespacedHelpers } from 'vuex';
	let {mapState} = createNamespacedHelpers('goods');
	export default {
		components: {},
		data() {
			return {
				indexArr: '',
				valueArr: '',

				//商品数据
				goodsList: [{
						goods_id: 0,
						img: '/static/img/goods/p1.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款'
					},
					{
						goods_id: 1,
						img: '/static/img/goods/p2.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款'
					},
					{
						goods_id: 2,
						img: '/static/img/goods/p3.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款'
					},
					{
						goods_id: 3,
						img: '/static/img/goods/p4.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款'
					},
					{
						goods_id: 4,
						img: '/static/img/goods/p5.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款'
					},
					{
						goods_id: 5,
						img: '/static/img/goods/p6.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款'
					},
					{
						goods_id: 6,
						img: '/static/img/goods/p7.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款'
					},
					{
						goods_id: 7,
						img: '/static/img/goods/p8.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款'
					},
					{
						goods_id: 8,
						img: '/static/img/goods/p9.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款'
					},
					{
						goods_id: 9,
						img: '/static/img/goods/p10.jpg',
						name: '商品名称商品名称商品名称商品名称商品名称',
						price: '￥168',
						slogan: '1235人付款'
					}
				],
				loadingText: "正在加载...",
				defaultSelected: [],
				filterData: [],
				secTimeData: [{
						time: "20:00",
						info: "即将抢购"
					},
					{
						time: "22:00",
						info: "即将抢购"
					},
					{
						time: "00:00",
						info: "即将抢购"
					},
					{
						time: "02:00",
						info: "即将抢购"
					},
					{
						time: "04:00",
						info: "即将抢购"
					},
					{
						time: "06:00",
						info: "即将抢购"
					},
				],
				currentNav: 0
			};
		},
		filters: {
			outData(value) {
				return JSON.stringify(value);
			}
		},
		onLoad: function() {
			//定时器模拟ajax异步请求数据
			setTimeout(() => {
				this.filterData = data;
				//设置选中项
				// 一下的注释是针对测试数据说明结构的意思，具体传入什么数据，要看你自己数据。如果data.js数据有修改，注意defaultSelected也要修改
				//传入defaultSelected的结构不能错，错了就报错运行异常。 不想选中的请传入null
				// this.defaultSelected = [
				// 	[1,1,0],				//第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项
				// 	[null,null],			//第1个菜单选中 都不选中
				// 	[1],					//第2个菜单选中 一级菜单的第1项
				// 	[[0],[1,2,7],[1,0]],	//筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
				// 	[[0],[1],[1]]			//单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项
				// ];
			}, 100);

			//模拟ajax请求子菜单数据。
			// setTimeout(()=>{
			// 	this.filterData[1].submenu[0].submenu = [{"name": "附近","value": "附近"},{"name": "1km","value": "1km"},{"name": "2km","value": "2km"},{"name": "3km","value": "3km"},{"name": "4km","value": "4km"},{"name": "5km","value": "5km"}];
			// },1000)
		},
		computed: {
			...mapState(['seckillData'])
		},
		methods: {
			//接收菜单结果
			confirm(e) {
				this.indexArr = e.index;
				this.valueArr = e.value;

			},
			//修改选中项-示例
			changeSelected() {
				this.defaultSelected = [];
				this.$nextTick(() => {
					this.defaultSelected = [
						[1, 1, 0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项
						[null, null], //第1个菜单选中 都不选中
						[1], //第2个菜单选中 一级菜单的第1项
						[
							[0],
							[1, 2, 7],
							[1, 0]
						], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
						[
							[0],
							[1],
							[1]
						] //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项
					];
				})
			},
			//轮播图指示器
			swiperChange(event) {
				//this.currentSwiper = event.detail.current;
			},
			// 当前
			changeNav(index) {
				this.currentNav = index;
			}
		},

		//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
		onReachBottom() {
			uni.showToast({
				title: '触发上拉加载'
			});
			let len = this.goodsList.length;
			if (len >= 80) {
				this.loadingText = "到底了";
				return false;
			} else {
				this.loadingText = "正在加载...";
			}
			let end_goods_id = this.goodsList[len - 1].goods_id;
			for (let i = 1; i <= 10; i++) {
				let goods_id = end_goods_id + i;
				let p = {
					goods_id: goods_id,
					img: '/static/img/goods/p' + (goods_id % 10 == 0 ? 10 : goods_id % 10) + '.jpg',
					name: '商品名称商品名称商品名称商品名称商品名称',
					price: '￥168',
					slogan: '1235人付款'
				};
				this.goodsList.push(p);
			}
		},
	}
</script>
<style lang="scss">
	.#{
 padding:0rpx
	}

	.aac {
		width: 56rpx;
		height: 26rpx;
		background-color: #f5610c;
		border-radius: 14rpx;
		font-size: 20rpx;
		line-height: 26rpx;
		text-align: center;
		color: white
	}

	.aab {
		font-size: 20rpx;
		line-height: 26rpx;
		text-align: center;
		color: white;
		width: 104rpx;
		height: 26rpx;
		background-color: #f5610c;
		border-radius: 14rpx;
		margin-left: 10rpx
	}

	.326 {
		width: 248rpx;
		height: 26rpx;
	}

	.komeito {
		width: 234rpx;
		height: 36rpx;
		font-family: PingFang SC;
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 36rpx;
		letter-spacing: 0rpx;
		color: #3b3b3b;
		// 省略文字
		white-space: nowrap;
		/* 2.溢出的部分隐藏起来 */
		overflow: hidden;
		/* 3.文字溢出的时候用省略号来显示 */
		text-overflow: ellipsis;
	}

	.splb {
		display: flex;
		padding: 10rpx 0;
		width: 700rpx;
		height: 220rpx;
		margin-left: 50rpx;
		margin-bottom: 30rpx;
	}

	.datajson {
		z-index: 2;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 250px;
		padding: 0 10px;
		background-color: rgba(255, 255, 255, .8);
		backdrop-filter: blur(15px);
		-webkit-backdrop-filter: blur(15px);
		font-size: 12px;

		.text {
			margin-top: 10px;
		}

		.item {
			width: 15px;
		}
	}

	.place {
		background-color: #ffffff;
		height: 44px;
	}

	.swiper {
		width: 100%;
		margin-top: 10upx;
		display: flex;
		justify-content: center;

		.swiper-box {
			width: 92%;
			height: 230rpx;

			overflow: hidden;
			border-radius: 15rpx;
			box-shadow: 0upx 8upx 25rpx rgba(0, 0, 0, 0.2);
			//兼容ios，微信小程序
			position: relative;
			z-index: 1;

			swiper {
				width: 100%;
				height: 230rpx;

				swiper-item {
					image {
						width: 100%;
						height: 230rpx;
					}
				}
			}

			.indicator {
				position: absolute;
				bottom: 20upx;
				left: 20upx;
				background-color: rgba(255, 255, 255, 0.4);
				width: 150upx;
				height: 5upx;
				border-radius: 3upx;
				overflow: hidden;
				display: flex;

				.dots {
					width: 0upx;
					background-color: rgba(255, 255, 255, 1);
					transition: all 0.3s ease-out;

					&.on {
						width: (100%/3);
					}
				}
			}
		}
	}

	.goods-list {
		padding-top: 10px;

		.loading-text {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 30px;
			color: #979797;
			font-size: 12px;
		}

		.product-list {
			width: 92%;
			padding: 0 4% 3vw 4%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.product {
				width: 48%;
				border-radius: 10px;
				background-color: #fff;
				margin: 0 0 7px 0;
				box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);

				image {
					width: 100%;
					border-radius: 10px 10px 0 0;
				}

				.name {
					width: 92%;
					padding: 5px 4%;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					text-align: justify;
					overflow: hidden;
					font-size: 15px;
				}

				.info {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					width: 92%;
					padding: 5px 4% 5px 4%;

					.price {
						color: #e65339;
						font-size: 15px;
						font-weight: 600;
					}

					.slogan {
						color: #807c87;
						font-size: 12px;
					}
				}
			}

		}
	}

	// 秒杀导航
	.seckill_nav {
		width: 122.5%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.seckill_item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		width: 17.5%;
		padding: 30rpx 0 10rpx;
	}

	.seckill_item_text {
		font-size: 28rpx;
		font-weight: 700;
	}

	// 动态class
	.activeText {
		color: #ff4142;
		display: block;
		font-size: 28rpx;
		font-weight: 700;
	}

	.activeInfo {
		background: linear-gradient(270deg, #ff4500, #ff1451);
		border-radius: 16rpx;
		padding: 4rpx;
		color: #fff;
		margin-top: 8rpx;
	}
	.buylink {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
	}
	.buyDiv {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 160rpx;
		    height: 80rpx;
		background: linear-gradient(270deg, #ff1451, #ff4500);
		color: #fff;
		font-size: 28rpx;
		border-radius: 8rpx;
		text-align: center;
		vertical-align: middle;
		box-sizing: border-box;
	}
</style>
